<!--
 * @author: LUOCAN
 * @create: 2021-06-22 09:02 AM
 * @license: MIT
 * @lastAuthor: DoubleW
 * @lastEditTime: 2021-07-05 14:50 PM
 * @desc: 
-->
<template>
  <div class="nav">
    <div class="head">
      <div class="container" :style="{ height }">
        <!-- logo -->
        <a class="logo">
          <!--""-->
          <!--<img-->
                <!--src="https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/dcec27cc6ece0eb5bb217e62e6bec104.svg"-->
                <!--alt=""-->
        <!--/>-->
          <img
                  src="@/assets/icon/youni.svg"
                  alt=""
                  style="width: 147px;"
          />
        </a>
        <!-- 导航分类 -->
        <div class="main-nav">
          <div class="main-home mn">
            <router-link to="/" :style="{ color: col.col1 }">首页</router-link>
          </div>
          <div class="main-point mn">
            <router-link to="/Hotpoint" :style="{ color: col.col2 }"
              >沸点
            </router-link>
          </div>
          <div class="main-message mn">
            <a onclick="alert('开发中');return;"> 资讯 </a>
            <svg
              data-v-3a33dc2b=""
              width="35"
              height="17"
              viewBox="0 0 35 17"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
              class="new-badge"
            >
              <rect
                data-v-3a33dc2b=""
                x="1"
                y="1"
                width="33"
                height="15"
                rx="7.5"
                fill="#F53F3F"
              ></rect>
              <path
                data-v-3a33dc2b=""
                d="M5.99461 12V4.95H6.95461L10.7446 9.87V4.95H11.9346V12H10.9846L7.18461 7.06V12H5.99461ZM13.4751 12V4.95H18.1651V5.97H14.7051V7.91H17.9451V8.93H14.7051V10.98H18.1651V12H13.4751ZM21.3526 12L18.8626 4.95H20.1826L21.9326 10.15L23.7726 4.95H24.7226L26.5226 10.22L28.3226 4.95H29.5726L27.0626 12H26.0026L24.2126 6.91L22.4126 12H21.3526Z"
                fill="white"
              ></path>
              <rect
                data-v-3a33dc2b=""
                x="1"
                y="1"
                width="33"
                height="15"
                rx="7.5"
                stroke="white"
                stroke-width="2"
              ></rect>
            </svg>
          </div>
          <div class="main-brochure mn">
            <a onclick="alert('开发中');return;"> 小册 </a>
          </div>
          <div class="main-activity mn">
            <a onclick="alert('开发中');return;"> 活动 </a>
          </div>
          <div class="main-developer">
            <a>
              <svg
                data-v-3a33dc2b=""
                width="127"
                height="21"
                viewBox="0 0 127 21"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                class="conference-svg"
              >
                <g data-v-3a33dc2b="" clip-path="url(#clip0)">
                  <path
                    data-v-3a33dc2b=""
                    d="M97.2408 10.3547H84.0062V12.189H97.2408V10.3547Z"
                    fill="#86909C"
                  ></path>
                  <path
                    data-v-3a33dc2b=""
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M83.0251 15.4666H86.4611L83.8356 20.4767H85.3231H86.1831H95.064H96.3354H97.4115L95.5236 16.1339H93.1761L94.2673 18.6424H87.145L88.8086 15.4666H98.2219V13.6323H83.0251V15.4666Z"
                    fill="#86909C"
                  ></path>
                  <path
                    data-v-3a33dc2b=""
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M86.7734 7.52802H94.4736L95.9996 9.72827H98.3457L95.5469 5.69653H95.0735H93.2008H88.0462H86.4665H85.7001L82.9012 9.72827H85.2474L86.7734 7.52802Z"
                    fill="#86909C"
                  ></path>
                  <path
                    data-v-3a33dc2b=""
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M28.3668 8.10736H30.6661V6.21533H17.3751V8.10736H19.7061V11.9602H16.5V13.8522H19.7061V14.8278L18.0866 20.453H20.2221L21.8417 14.8278V13.8522H26.2312V20.4971H28.3668V13.8536H31.5784V11.9616H28.3668V8.10736ZM21.8417 11.9616V8.10874H26.2312V11.9616H21.8417Z"
                    fill="#86909C"
                  ></path>
                  <path
                    data-v-3a33dc2b=""
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M75.6812 5.80957H72.9581L71.8669 8.33319H65.9376V10.3546H70.9931L66.638 20.4298H69.3598L73.7163 10.3546H81.4949V8.33319H74.59L75.6812 5.80957Z"
                    fill="#86909C"
                  ></path>
                  <path
                    data-v-3a33dc2b=""
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M73.4232 11.1926L78.6893 20.3198H81.4124L76.1464 11.1926H73.4232Z"
                    fill="#86909C"
                  ></path>
                  <path
                    data-v-3a33dc2b=""
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M64.6125 6.22362H62.5375L62.3875 6.49882H57.9829V5.75439H55.8776V6.49882H51.0587V8.33306H55.8776V9.63202H49.9469V11.4663H52.5765L50.3267 15.5916H52.077V20.4297H52.7664H54.1823H61.4669H63.1994H63.5723V14.2087H63.5998V12.3744H54.1561L54.6515 11.4663H64.8616V9.63202H62.7549L64.6125 6.22362ZM54.1809 18.5954V17.3006H61.4656V18.5954H54.1809ZM61.4656 15.5916H54.1809V14.2087H61.4656V15.5916ZM57.9815 8.33306H61.3858L60.6785 9.63202H57.9815V8.33306Z"
                    fill="#86909C"
                  ></path>
                  <path
                    data-v-3a33dc2b=""
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M47.5926 13.0434V11.2091H38.5865L38.9608 10.1688H48.2572V8.33323H39.6199L40.5831 5.65137H38.4517L37.4884 8.33323H35.8056L36.4729 6.08757H34.658L33.4457 10.1675H34.358H35.2593H36.828L33.1774 20.3349H35.3088L37.6935 13.6956L40.8872 16.5247L36.8789 20.4298H40.4799L42.6967 18.1277L45.296 20.4298H48.2558L44.0603 16.7132L47.5912 13.0461L47.5926 13.0434ZM44.4607 13.0434L42.2976 15.1514L40.5817 13.6323H37.7155L37.9274 13.0434H44.4607Z"
                    fill="#86909C"
                  ></path>
                  <path
                    data-v-3a33dc2b=""
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M47.0394 7.7264L46.2069 5.5H44.0768L44.9079 7.7264H47.0394Z"
                    fill="#86909C"
                  ></path>
                </g>
                <g data-v-3a33dc2b="" clip-path="url(#clip1)">
                  <path
                    data-v-3a33dc2b=""
                    d="M102.634 9.41109V8.40738L105.813 5.06039C106.08 4.7818 106.361 4.45777 106.382 4.02309C106.416 3.3533 105.914 2.806 105.199 2.806C104.452 2.806 103.972 3.37503 103.948 4.04483H102.5C102.522 2.36935 103.816 1.5 105.201 1.5C106.541 1.5 107.835 2.32588 107.835 3.98753C107.835 4.71265 107.489 5.30341 106.874 5.93961L104.887 8.00432H107.843L107.831 9.41109H102.634Z"
                    fill="#1E80FF"
                  ></path>
                  <path
                    data-v-3a33dc2b=""
                    d="M109.228 5.51679C109.228 3.06285 110.443 1.5 112.407 1.5C114.392 1.5 115.598 3.07273 115.598 5.50494C115.598 7.93714 114.38 9.5 112.407 9.5C110.399 9.5 109.228 7.96085 109.228 5.51679ZM114.147 5.50494C114.147 3.96579 113.477 2.90479 112.407 2.90479C111.314 2.90479 110.678 3.98753 110.678 5.51482C110.678 7.11126 111.369 8.09323 112.407 8.09323C113.511 8.09323 114.147 7.02235 114.147 5.50494Z"
                    fill="#1E80FF"
                  ></path>
                  <path
                    data-v-3a33dc2b=""
                    d="M117.115 9.41109V8.40738L120.294 5.06039C120.561 4.7818 120.841 4.45777 120.863 4.02309C120.897 3.3533 120.395 2.806 119.68 2.806C118.933 2.806 118.453 3.37503 118.429 4.04483H116.979C117.002 2.36935 118.296 1.5 119.682 1.5C121.021 1.5 122.315 2.32588 122.315 3.98753C122.315 4.71265 121.969 5.30341 121.355 5.93961L119.369 8.00432H122.325L122.313 9.41109H117.115Z"
                    fill="#1E80FF"
                  ></path>
                  <path
                    data-v-3a33dc2b=""
                    d="M125.461 9.41115V2.98389H123.631V1.60083H126.911V9.41115H125.461Z"
                    fill="#1E80FF"
                  ></path>
                </g>
                <path
                  data-v-3a33dc2b=""
                  d="M10 1L12.5 5L8.5 5.5L7 4L10 1Z"
                  stroke="#6AA1FF"
                ></path>
                <path
                  data-v-3a33dc2b=""
                  d="M8.5 20L1 10L3 8L7.5 11.5M8.5 20L12.5 18.5M8.5 20L7.5 11.5M7.5 11.5L12 11"
                  stroke="#6AA1FF"
                ></path>
                <path
                  data-v-3a33dc2b=""
                  d="M4.5 5.5L8 8.5L13 8"
                  stroke="#6AA1FF"
                ></path>
                <defs data-v-3a33dc2b="">
                  <clipPath data-v-3a33dc2b="" id="clip0">
                    <rect
                      data-v-3a33dc2b=""
                      width="81.8457"
                      height="15"
                      fill="white"
                      transform="translate(16.5 5.5)"
                    ></rect>
                  </clipPath>
                  <clipPath data-v-3a33dc2b="" id="clip1">
                    <rect
                      data-v-3a33dc2b=""
                      width="24.411"
                      height="8"
                      fill="white"
                      transform="translate(102.5 1.5)"
                    ></rect>
                  </clipPath>
                </defs>
              </svg>
            </a>
          </div>
        </div>
        <!-- 移动端导航 -->
        <div class="mobile-nav">
          <div class="mobile-home">
            <a @click="hopen">
              <span class="mobile-h">首页</span>
              <img
                src="//sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/0911114f258a2f38db56a80c2c7dc90d.svg"
              />
            </a>
          </div>
          <div class="mobile-detil">
            <div class="mobile-hm">
              <a @click="mobilenav($event)"> 首页 </a>
            </div>
            <div class="mobile-point mp">
              <a @click="mobilenav($event)"> 沸点 </a>
            </div>
            <div class="mobile-message mp">
              <a @click="mobilenav($event)" onclick="alert('开发中');return;"> 资讯 </a>
              <svg
                data-v-3a33dc2b=""
                width="35"
                height="17"
                viewBox="0 0 35 17"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
                class="new-badge"
              >
                <rect
                  data-v-3a33dc2b=""
                  x="1"
                  y="1"
                  width="33"
                  height="15"
                  rx="7.5"
                  fill="#F53F3F"
                ></rect>
                <path
                  data-v-3a33dc2b=""
                  d="M5.99461 12V4.95H6.95461L10.7446 9.87V4.95H11.9346V12H10.9846L7.18461 7.06V12H5.99461ZM13.4751 12V4.95H18.1651V5.97H14.7051V7.91H17.9451V8.93H14.7051V10.98H18.1651V12H13.4751ZM21.3526 12L18.8626 4.95H20.1826L21.9326 10.15L23.7726 4.95H24.7226L26.5226 10.22L28.3226 4.95H29.5726L27.0626 12H26.0026L24.2126 6.91L22.4126 12H21.3526Z"
                  fill="white"
                ></path>
                <rect
                  data-v-3a33dc2b=""
                  x="1"
                  y="1"
                  width="33"
                  height="15"
                  rx="7.5"
                  stroke="white"
                  stroke-width="2"
                ></rect>
              </svg>
            </div>
            <div class="mobile-brochure mp">
              <a @click="mobilenav($event)" onclick="alert('开发中');return;"> 小册 </a>
            </div>
            <div class="mobile-activity mp">
              <a @click="mobilenav($event) " onclick="alert('开发中');return;"> 活动 </a>
            </div>
            <div class="mobile-developer mp">
              <a>
                <svg
                  data-v-3a33dc2b=""
                  width="127"
                  height="21"
                  viewBox="0 0 127 21"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                  class="conference-svg"
                >
                  <g data-v-3a33dc2b="" clip-path="url(#clip0)">
                    <path
                      data-v-3a33dc2b=""
                      d="M97.2408 10.3547H84.0062V12.189H97.2408V10.3547Z"
                      fill="#86909C"
                    ></path>
                    <path
                      data-v-3a33dc2b=""
                      fill-rule="evenodd"
                      clip-rule="evenodd"
                      d="M83.0251 15.4666H86.4611L83.8356 20.4767H85.3231H86.1831H95.064H96.3354H97.4115L95.5236 16.1339H93.1761L94.2673 18.6424H87.145L88.8086 15.4666H98.2219V13.6323H83.0251V15.4666Z"
                      fill="#86909C"
                    ></path>
                    <path
                      data-v-3a33dc2b=""
                      fill-rule="evenodd"
                      clip-rule="evenodd"
                      d="M86.7734 7.52802H94.4736L95.9996 9.72827H98.3457L95.5469 5.69653H95.0735H93.2008H88.0462H86.4665H85.7001L82.9012 9.72827H85.2474L86.7734 7.52802Z"
                      fill="#86909C"
                    ></path>
                    <path
                      data-v-3a33dc2b=""
                      fill-rule="evenodd"
                      clip-rule="evenodd"
                      d="M28.3668 8.10736H30.6661V6.21533H17.3751V8.10736H19.7061V11.9602H16.5V13.8522H19.7061V14.8278L18.0866 20.453H20.2221L21.8417 14.8278V13.8522H26.2312V20.4971H28.3668V13.8536H31.5784V11.9616H28.3668V8.10736ZM21.8417 11.9616V8.10874H26.2312V11.9616H21.8417Z"
                      fill="#86909C"
                    ></path>
                    <path
                      data-v-3a33dc2b=""
                      fill-rule="evenodd"
                      clip-rule="evenodd"
                      d="M75.6812 5.80957H72.9581L71.8669 8.33319H65.9376V10.3546H70.9931L66.638 20.4298H69.3598L73.7163 10.3546H81.4949V8.33319H74.59L75.6812 5.80957Z"
                      fill="#86909C"
                    ></path>
                    <path
                      data-v-3a33dc2b=""
                      fill-rule="evenodd"
                      clip-rule="evenodd"
                      d="M73.4232 11.1926L78.6893 20.3198H81.4124L76.1464 11.1926H73.4232Z"
                      fill="#86909C"
                    ></path>
                    <path
                      data-v-3a33dc2b=""
                      fill-rule="evenodd"
                      clip-rule="evenodd"
                      d="M64.6125 6.22362H62.5375L62.3875 6.49882H57.9829V5.75439H55.8776V6.49882H51.0587V8.33306H55.8776V9.63202H49.9469V11.4663H52.5765L50.3267 15.5916H52.077V20.4297H52.7664H54.1823H61.4669H63.1994H63.5723V14.2087H63.5998V12.3744H54.1561L54.6515 11.4663H64.8616V9.63202H62.7549L64.6125 6.22362ZM54.1809 18.5954V17.3006H61.4656V18.5954H54.1809ZM61.4656 15.5916H54.1809V14.2087H61.4656V15.5916ZM57.9815 8.33306H61.3858L60.6785 9.63202H57.9815V8.33306Z"
                      fill="#86909C"
                    ></path>
                    <path
                      data-v-3a33dc2b=""
                      fill-rule="evenodd"
                      clip-rule="evenodd"
                      d="M47.5926 13.0434V11.2091H38.5865L38.9608 10.1688H48.2572V8.33323H39.6199L40.5831 5.65137H38.4517L37.4884 8.33323H35.8056L36.4729 6.08757H34.658L33.4457 10.1675H34.358H35.2593H36.828L33.1774 20.3349H35.3088L37.6935 13.6956L40.8872 16.5247L36.8789 20.4298H40.4799L42.6967 18.1277L45.296 20.4298H48.2558L44.0603 16.7132L47.5912 13.0461L47.5926 13.0434ZM44.4607 13.0434L42.2976 15.1514L40.5817 13.6323H37.7155L37.9274 13.0434H44.4607Z"
                      fill="#86909C"
                    ></path>
                    <path
                      data-v-3a33dc2b=""
                      fill-rule="evenodd"
                      clip-rule="evenodd"
                      d="M47.0394 7.7264L46.2069 5.5H44.0768L44.9079 7.7264H47.0394Z"
                      fill="#86909C"
                    ></path>
                  </g>
                  <g data-v-3a33dc2b="" clip-path="url(#clip1)">
                    <path
                      data-v-3a33dc2b=""
                      d="M102.634 9.41109V8.40738L105.813 5.06039C106.08 4.7818 106.361 4.45777 106.382 4.02309C106.416 3.3533 105.914 2.806 105.199 2.806C104.452 2.806 103.972 3.37503 103.948 4.04483H102.5C102.522 2.36935 103.816 1.5 105.201 1.5C106.541 1.5 107.835 2.32588 107.835 3.98753C107.835 4.71265 107.489 5.30341 106.874 5.93961L104.887 8.00432H107.843L107.831 9.41109H102.634Z"
                      fill="#1E80FF"
                    ></path>
                    <path
                      data-v-3a33dc2b=""
                      d="M109.228 5.51679C109.228 3.06285 110.443 1.5 112.407 1.5C114.392 1.5 115.598 3.07273 115.598 5.50494C115.598 7.93714 114.38 9.5 112.407 9.5C110.399 9.5 109.228 7.96085 109.228 5.51679ZM114.147 5.50494C114.147 3.96579 113.477 2.90479 112.407 2.90479C111.314 2.90479 110.678 3.98753 110.678 5.51482C110.678 7.11126 111.369 8.09323 112.407 8.09323C113.511 8.09323 114.147 7.02235 114.147 5.50494Z"
                      fill="#1E80FF"
                    ></path>
                    <path
                      data-v-3a33dc2b=""
                      d="M117.115 9.41109V8.40738L120.294 5.06039C120.561 4.7818 120.841 4.45777 120.863 4.02309C120.897 3.3533 120.395 2.806 119.68 2.806C118.933 2.806 118.453 3.37503 118.429 4.04483H116.979C117.002 2.36935 118.296 1.5 119.682 1.5C121.021 1.5 122.315 2.32588 122.315 3.98753C122.315 4.71265 121.969 5.30341 121.355 5.93961L119.369 8.00432H122.325L122.313 9.41109H117.115Z"
                      fill="#1E80FF"
                    ></path>
                    <path
                      data-v-3a33dc2b=""
                      d="M125.461 9.41115V2.98389H123.631V1.60083H126.911V9.41115H125.461Z"
                      fill="#1E80FF"
                    ></path>
                  </g>
                  <path
                    data-v-3a33dc2b=""
                    d="M10 1L12.5 5L8.5 5.5L7 4L10 1Z"
                    stroke="#6AA1FF"
                  ></path>
                  <path
                    data-v-3a33dc2b=""
                    d="M8.5 20L1 10L3 8L7.5 11.5M8.5 20L12.5 18.5M8.5 20L7.5 11.5M7.5 11.5L12 11"
                    stroke="#6AA1FF"
                  ></path>
                  <path
                    data-v-3a33dc2b=""
                    d="M4.5 5.5L8 8.5L13 8"
                    stroke="#6AA1FF"
                  ></path>
                  <defs data-v-3a33dc2b="">
                    <clipPath data-v-3a33dc2b="" id="clip0">
                      <rect
                        data-v-3a33dc2b=""
                        width="81.8457"
                        height="15"
                        fill="white"
                        transform="translate(16.5 5.5)"
                      ></rect>
                    </clipPath>
                    <clipPath data-v-3a33dc2b="" id="clip1">
                      <rect
                        data-v-3a33dc2b=""
                        width="24.411"
                        height="8"
                        fill="white"
                        transform="translate(102.5 1.5)"
                      ></rect>
                    </clipPath>
                  </defs>
                </svg>
              </a>
            </div>
          </div>
        </div>
        <!-- 搜索框 创作者中心 写文章 -->
        <div class="search-add">
          <!-- 搜索框 -->
          <div class="search-add-div">
            <div class="nav-item-search">
              <div class="search-form">
                <input
                  type="search"
                  maxlength="32"
                  placeholder="探索有你"
                  class="search-input"
                  @focus="infocus"
                  @blur="inblur"
                  @keydown="keyDown($event)"
                />
                <img
                  src="//sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/8f68a2223e9650f14d6e6781cdcd717a.svg"
                  alt="搜索"
                  class="search-icon"
                />
                <div class="typehead" v-show="searh.length">
                  <div class="title">
                    <span>搜索历史</span>
                    <span class="clear" @click="clear"> 清空 </span>
                  </div>
                  <div class="list">
                    <li v-for="(item, index) in searh" :key="index">
                      {{ item }}
                    </li>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 创作者中心 写文章  -->
          <div class="nav-item-add">
            <button class="creator-btn">创作者中心</button>
            <div
              class="add-group"
              v-for="item in homewritedata"
              :key="item.typea"
            >
              <button class="add-btn" @click="writeTo($event)" :id="item.typea">
                {{ item.namea }}
              </button>
              <div class="more" @click="more">
                <img
                  src="//sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/fd92e44e46bf428b65aa0dc78366a82a.svg"
                />
              </div>
              <div class="more-add">
                <span :id="item.typeb" @click="writeTo($event)">{{
                  item.nameb
                }}</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 登录 -->
        <div class="login">
          <button
            class="login-button"
            @click="$emit('logTo', 1)"
            v-show="!logafter"
          >
            登录
          </button>
          <!-- 登陆后 -->
          <div class="userin" v-show="logafter">
            <img
              src="https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/c7f91fad712592633383df6aa430c93c.svg"
              alt=""
            />
            <div class="menu" @click="navclick">
              <img :src="img ? img : $store.state.avatar" alt="" />
            </div>
            <!-- 下拉列表 -->
            <div class="user-dropdown-list" v-show="navc">
              <div class="nav-menu-item-group">
                <div class="nav-menu-item">
                  <svg
                    width="16"
                    height="16"
                    viewBox="0 0 16 16"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    class="fengwei"
                    data-v-3a33dc2b=""
                  >
                    <path
                      fill-rule="evenodd"
                      clip-rule="evenodd"
                      d="M14.3335 13.6696C14.5176 13.6696 14.6668 13.8188 14.6668 14.0029V14.6696C14.6668 14.8537 14.5176 15.0029 14.3335 15.0029H1.66683C1.48273 15.0029 1.3335 14.8537 1.3335 14.6696V14.0029C1.3335 13.8188 1.48273 13.6696 1.66683 13.6696H14.3335Z"
                      fill="#86909C"
                      data-v-3a33dc2b=""
                    ></path>
                    <path
                      fill-rule="evenodd"
                      clip-rule="evenodd"
                      d="M9.8175 1.52987L9.77386 1.48969C9.51193 1.26901 9.1201 1.28199 8.87345 1.52864L8.40329 1.9988L8.40492 2.00037L7.27453 3.13954L10.5036 6.3751L12.1057 4.77295C12.3656 4.51309 12.3661 4.09193 12.107 3.83138L9.8175 1.52987ZM9.50415 7.3746L6.27569 4.14613L1.33325 9.12694V11.6696L1.33508 11.7194C1.36053 12.0643 1.64846 12.3363 1.99992 12.3363H4.5426L9.50415 7.3746Z"
                      fill="#86909C"
                      data-v-3a33dc2b=""
                    ></path>
                  </svg>
                  <span>写文章</span>
                </div>
                <div class="nav-menu-item">
                  <svg
                    width="16"
                    height="16"
                    viewBox="0 0 16 16"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    class="fengwei"
                    data-v-3a33dc2b=""
                  >
                    <path
                      fill-rule="evenodd"
                      clip-rule="evenodd"
                      d="M2 1.66663C2 1.11434 2.44772 0.666626 3 0.666626H11L14 3.80948V14.3333C14 14.8856 13.5523 15.3333 13 15.3333H3C2.44772 15.3333 2 14.8856 2 14.3333V1.66663ZM4.66675 9.66667C4.66675 9.29848 4.96522 9 5.33341 9H8.00008C8.36827 9 8.66675 9.29848 8.66675 9.66667C8.66675 10.0349 8.36827 10.3333 8.00008 10.3333H5.33341C4.96522 10.3333 4.66675 10.0349 4.66675 9.66667ZM5.33341 6.33337C4.96522 6.33337 4.66675 6.63185 4.66675 7.00004C4.66675 7.36823 4.96522 7.66671 5.33341 7.66671H10.6667C11.0349 7.66671 11.3334 7.36823 11.3334 7.00004C11.3334 6.63185 11.0349 6.33337 10.6667 6.33337H5.33341Z"
                      fill="#86909C"
                      data-v-3a33dc2b=""
                    ></path>
                    <path
                      fill-rule="evenodd"
                      clip-rule="evenodd"
                      d="M10.3999 1.5L13.3999 4.5H10.3999V1.5Z"
                      fill="white"
                      data-v-3a33dc2b=""
                    ></path>
                  </svg>
                  <span>草稿箱</span>
                </div>
              </div>
              <div class="nav-menu-item-group">
                <div class="nav-menu-item">
                  <svg
                    width="16"
                    height="16"
                    viewBox="0 0 16 16"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    class="fengwei"
                    data-v-3a33dc2b=""
                  >
                    <path
                      fill-rule="evenodd"
                      clip-rule="evenodd"
                      d="M11.3333 4.33333C11.3333 2.49238 9.84095 1 8 1C6.15905 1 4.66667 2.49238 4.66667 4.33333C4.66667 6.17428 6.15905 7.66667 8 7.66667C9.84095 7.66667 11.3333 6.17428 11.3333 4.33333ZM14 12.6667C14 10.0952 11.8409 8.66667 10 8.66667H6C4.15905 8.66667 2 10.0974 2 12.6667V14.6667C2 15.0349 2.29848 15.3333 2.66667 15.3333H13.3333C13.7015 15.3333 14 15.0349 14 14.6667V12.6667Z"
                      fill="#86909C"
                      data-v-3a33dc2b=""
                    ></path>
                  </svg>
                  <span>我的主页</span>
                </div>
                <div class="nav-menu-item">
                  <svg
                    width="16"
                    height="16"
                    viewBox="0 0 16 16"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    class="fengwei"
                    data-v-3a33dc2b=""
                  >
                    <path
                      fill-rule="evenodd"
                      clip-rule="evenodd"
                      d="M8.89173 0.830916L9.01335 0.887911C9.82399 1.27873 11.0012 2.06767 11.0012 3.33425C11.0012 3.83643 10.7783 4.50245 10.3324 5.33231H12.8585C14.8478 5.33231 15.3047 7.08822 14.8478 8.40394L12.8585 13.6407C12.6904 14.2498 12.1306 14.6723 11.4918 14.6723H3.32845V5.33231H4.6931L7.65981 1.11199C7.84713 0.81396 8.35279 0.585483 8.89173 0.830916ZM2.33333 5.33333V14.6667H1V5.33333H2.33333Z"
                      fill="#86909C"
                      data-v-3a33dc2b=""
                    ></path>
                  </svg>
                  <span onclick="alert('开发中');return;">我赞过的</span>
                </div>
                <div class="nav-menu-item">
                  <svg
                    width="16"
                    height="16"
                    viewBox="0 0 16 16"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    class="fengwei"
                    data-v-3a33dc2b=""
                  >
                    <path
                      fill-rule="evenodd"
                      clip-rule="evenodd"
                      d="M14.9187 6.53385C15.0999 6.76744 14.9466 7.2 14.651 7.2H6.32905V4H5.02905V7.2H3.6C2.16406 7.2 1 6.03594 1 4.6C1 3.16406 2.16406 2 3.6 2H14.651C14.9466 2 15.0999 2.43257 14.9188 2.66616C14.5064 3.19779 14.2602 3.86959 14.2602 4.60001C14.2602 5.33043 14.5064 6.00222 14.9187 6.53385Z"
                      fill="#86909C"
                      data-v-3a33dc2b=""
                    ></path>
                    <path
                      fill-rule="evenodd"
                      clip-rule="evenodd"
                      d="M1.34902 14C1.0534 14 0.900077 13.5675 1.08126 13.3339C1.49363 12.8023 1.7398 12.1305 1.7398 11.4001C1.7398 10.6696 1.49362 9.99784 1.08125 9.46621C0.900064 9.23262 1.05339 8.80005 1.34901 8.80005H12.4C13.8359 8.80005 15 9.96411 15 11.4C15 12.836 13.8359 14 12.4 14H1.34902Z"
                      fill="#86909C"
                      data-v-3a33dc2b=""
                    ></path>
                  </svg>
                  <span onclick="alert('开发中');return;">我的小册</span>
                </div>
                <div class="nav-menu-item">
                  <svg
                    width="16"
                    height="16"
                    viewBox="0 0 16 16"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    class="fengwei"
                    data-v-3a33dc2b=""
                  >
                    <path
                      fill-rule="evenodd"
                      clip-rule="evenodd"
                      d="M4.07409 14.913C3.78885 15.0502 3.44641 14.9301 3.30922 14.6449C3.26321 14.5492 3.24467 14.4427 3.25568 14.3371L3.67332 10.3317C3.69013 10.1705 3.63789 10.0097 3.52953 9.88917L0.813641 6.86787C0.602045 6.63248 0.621335 6.27013 0.856725 6.05854C0.931303 5.9915 1.02217 5.9452 1.12024 5.92427L5.09331 5.07635C5.25183 5.04251 5.38861 4.94314 5.46977 4.80283L7.50394 1.28624C7.66242 1.01226 8.013 0.918629 8.28698 1.07711C8.37379 1.12732 8.4459 1.19943 8.49611 1.28624L10.5303 4.80283C10.6114 4.94314 10.7482 5.04251 10.9067 5.07635L14.8798 5.92427C15.1894 5.99033 15.3867 6.29482 15.3207 6.60436C15.2997 6.70243 15.2534 6.7933 15.1864 6.86787L12.4705 9.88917C12.3622 10.0097 12.3099 10.1705 12.3267 10.3317L12.7444 14.3371C12.7772 14.6519 12.5486 14.9337 12.2338 14.9665C12.1282 14.9775 12.0216 14.959 11.926 14.913L8.24843 13.1442C8.09143 13.0687 7.90862 13.0687 7.75162 13.1442L4.07409 14.913Z"
                      fill="#86909C"
                      data-v-3a33dc2b=""
                    ></path>
                  </svg>
                  <span onclick="alert('开发中');return;">我的收藏</span>
                </div>
                <div class="nav-menu-item">
                  <svg
                    width="16"
                    height="16"
                    viewBox="0 0 16 16"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    class="fengwei"
                    data-v-3a33dc2b=""
                  >
                    <path
                      fill-rule="evenodd"
                      clip-rule="evenodd"
                      d="M14 1.33329C14 0.965103 13.7015 0.666626 13.3333 0.666626H2.66667C2.29848 0.666626 2 0.965103 2 1.33329V14.876C2 14.9877 2.02807 15.0976 2.08163 15.1957C2.25817 15.5188 2.66321 15.6376 2.98632 15.4611L7.68035 12.8963C7.87955 12.7875 8.12045 12.7875 8.31965 12.8963L13.0137 15.4611C13.1117 15.5146 13.2216 15.5428 13.3333 15.5428C13.7015 15.5428 14 15.2442 14 14.876V1.33329ZM11.0641 5.2215L10.5927 4.7501C10.4626 4.61992 10.2515 4.61992 10.1213 4.7501L7.5286 7.34282L6.35009 6.16431C6.21992 6.03414 6.00886 6.03414 5.87869 6.16431L5.40728 6.63572C5.27711 6.76589 5.27711 6.97694 5.40728 7.10712L7.2929 8.99274C7.42308 9.12291 7.63413 9.12291 7.76431 8.99274L11.0641 5.69291C11.1943 5.56273 11.1943 5.35168 11.0641 5.2215Z"
                      fill="#86909C"
                      data-v-3a33dc2b=""
                    ></path>
                  </svg>
                  <span onclick="alert('开发中');return;">标签管理</span>
                </div>
              </div>
              <div class="nav-menu-item-group">
                <div class="nav-menu-item">
                  <svg
                    width="16"
                    height="16"
                    viewBox="0 0 16 16"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    class="fengwei"
                    data-v-3a33dc2b=""
                  >
                    <path
                      fill-rule="evenodd"
                      clip-rule="evenodd"
                      d="M13.9312 1.77484C13.7687 1.73656 13.5998 1.82528 13.5416 1.98604L10.543 11.8135L12.1103 12.3804L15.1135 2.53652L15.1224 2.50003C15.152 2.34157 15.063 2.18186 14.908 2.1258L13.9685 1.78596L13.9312 1.77484ZM10.3333 12.4378L11.9159 12.9967L10.6785 14.3031C10.6026 14.3833 10.476 14.3867 10.3958 14.3108C10.3559 14.273 10.3333 14.2205 10.3333 14.1656V12.4378ZM7.66667 12.6667C7.85076 12.6667 8 12.8159 8 13V13.6667C8 13.8508 7.85076 14 7.66667 14H1.33333C1.14924 14 1 13.8508 1 13.6667V13C1 12.8159 1.14924 12.6667 1.33333 12.6667H7.66667ZM7.66667 9.33333C7.85076 9.33333 8 9.48257 8 9.66667V10.3333C8 10.5174 7.85076 10.6667 7.66667 10.6667H1.33333C1.14924 10.6667 1 10.5174 1 10.3333V9.66667C1 9.48257 1.14924 9.33333 1.33333 9.33333H7.66667ZM10.3333 2.66667C10.3333 2.29848 10.0349 2 9.66667 2H1.66667C1.29848 2 1 2.29848 1 2.66667V6.66667C1 7.03486 1.29848 7.33333 1.66667 7.33333H9.66667C10.0349 7.33333 10.3333 7.03486 10.3333 6.66667V2.66667Z"
                      fill="#86909C"
                      data-v-3a33dc2b=""
                    ></path>
                  </svg>
                  <span onclick="alert('开发中');return;">字学</span>
                </div>
              </div>

              <div class="nav-menu-item-group">
                <router-link to="/Set" style="color: #4e5969">
                  <div class="nav-menu-item">
                    <svg
                      width="16"
                      height="16"
                      viewBox="0 0 16 16"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      class="fengwei"
                      data-v-3a33dc2b=""
                    >
                      <path
                        fill-rule="evenodd"
                        clip-rule="evenodd"
                        d="M7.99989 0.727295C8.53915 0.727295 9.07116 0.786648 9.58901 0.903237L9.88786 0.970519L10.8198 3.09506L13.1143 2.84422L13.3217 3.07014C14.0479 3.86109 14.5927 4.80447 14.9121 5.83475L15.0021 6.12519L14.8231 6.371L13.6368 8.00002L15.0021 9.87485L14.9121 10.1653C14.5927 11.1956 14.0479 12.139 13.3217 12.9299L13.1143 13.1558L10.8198 12.905L9.88786 15.0295L9.58901 15.0968C9.07116 15.2134 8.53915 15.2727 7.99989 15.2727C7.46051 15.2727 6.92838 15.2134 6.41041 15.0967L6.11154 15.0294L5.98852 14.7489L5.17999 12.905L2.88551 13.1558L2.67809 12.9299C1.95184 12.1389 1.40698 11.1954 1.08759 10.1649L0.997559 9.87446L1.17661 9.62865L2.36299 8.00002L0.997559 6.12559L1.08759 5.83512C1.40698 4.80469 1.95184 3.86118 2.67809 3.07014L2.88551 2.84422L5.17999 3.09505L6.11154 0.970623L6.41041 0.903319C6.92838 0.786676 7.46051 0.727295 7.99989 0.727295ZM7.99996 4.96969C9.66782 4.96969 11.0187 6.32704 11.0187 7.99999C11.0187 9.67293 9.66782 11.0303 7.99996 11.0303C6.3321 11.0303 4.9812 9.67293 4.9812 7.99999C4.9812 6.32704 6.3321 4.96969 7.99996 4.96969ZM6.19336 7.99999C6.19336 6.99518 7.00287 6.1818 8 6.1818C8.99713 6.1818 9.80663 6.99518 9.80663 7.99999C9.80663 9.00479 8.99713 9.81817 8 9.81817C7.00287 9.81817 6.19336 9.00479 6.19336 7.99999Z"
                        fill="#86909C"
                        data-v-3a33dc2b=""
                      ></path>
                    </svg>
                    <span onclick="alert('开发中');return;">设置</span>
                  </div>
                </router-link>
                <div class="nav-menu-item gyse">
                  <svg
                    width="16"
                    height="16"
                    viewBox="0 0 16 16"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    class="fengwei"
                    data-v-3a33dc2b=""
                  >
                    <path
                      fill-rule="evenodd"
                      clip-rule="evenodd"
                      d="M8.00008 0.666626C12.0502 0.666626 15.3334 3.94987 15.3334 7.99996C15.3334 12.05 12.0502 15.3333 8.00008 15.3333C3.94999 15.3333 0.666748 12.05 0.666748 7.99996C0.666748 3.94987 3.94999 0.666626 8.00008 0.666626ZM8.33333 10.6667C8.51743 10.6667 8.66667 10.8159 8.66667 11V11.6667C8.66667 11.8508 8.51743 12 8.33333 12H7.66667C7.48257 12 7.33333 11.8508 7.33333 11.6667V11C7.33333 10.8159 7.48257 10.6667 7.66667 10.6667H8.33333ZM7.90531 4C8.69777 4 9.3561 4.19191 9.88032 4.57573C10.4045 4.95955 10.6666 5.52817 10.6666 6.28159C10.6666 6.7436 10.5527 7.13275 10.3248 7.44904C10.1915 7.64095 9.93555 7.88617 9.55685 8.1847L9.18341 8.47789C8.98004 8.63782 8.84504 8.8244 8.77842 9.03763C8.76029 9.09582 8.74435 9.204 8.73061 9.36216C8.71566 9.53444 8.57145 9.66667 8.39853 9.66667H7.65226C7.46817 9.66667 7.31893 9.51743 7.31893 9.33333L7.31928 9.31796L7.32034 9.30262C7.36327 8.83869 7.40923 8.54512 7.45823 8.42192C7.5494 8.19269 7.78433 7.92882 8.16303 7.63029L8.54699 7.32643C8.67322 7.23048 9.32369 6.77243 9.32369 6.36689C9.32369 5.96134 9.25304 5.81218 9.04943 5.5896C8.84581 5.36703 8.38745 5.29539 7.97368 5.29539C7.56693 5.29539 7.21935 5.40341 7.04928 5.67706C6.97052 5.8038 6.90611 5.93901 6.85966 6.07696C6.84138 6.13123 6.82519 6.19951 6.81108 6.2818C6.78364 6.44182 6.6449 6.5588 6.48254 6.5588H5.69776C5.51366 6.5588 5.36442 6.40956 5.36442 6.22546L5.36495 6.2066L5.36655 6.18781C5.37503 6.11329 5.3837 6.05131 5.39258 6.00185C5.52254 5.27812 5.85168 4.74589 6.37999 4.40514C6.79376 4.13505 7.30219 4 7.90531 4Z"
                      fill="#86909C"
                      data-v-3a33dc2b=""
                    ></path>
                  </svg>
                  <span class="gy" onclick="alert('开发中');return;">关于</span>
                  <div class="nav-menu-se">
                    <div class="menu-se" onclick="alert('开发中');return;">下载应用</div>
                    <div class="menu-se" onclick="alert('开发中');return;">翻译计划</div>
                  </div>
                  <svg
                    width="16"
                    height="16"
                    viewBox="0 0 16 16"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    class="more-icon"
                    data-v-3a33dc2b=""
                  >
                    <path
                      fill-rule="evenodd"
                      clip-rule="evenodd"
                      d="M10.8523 8L5.43113 2.57885C5.30095 2.44868 5.30095 2.23762 5.43113 2.10745L5.90253 1.63604C6.03271 1.50587 6.24376 1.50587 6.37394 1.63604L12.2665 7.5286C12.5268 7.78895 12.5268 8.21106 12.2665 8.47141L6.37394 14.364C6.24376 14.4941 6.03271 14.4941 5.90253 14.364L5.43113 13.8926C5.30095 13.7624 5.30095 13.5513 5.43113 13.4212L10.8523 8Z"
                      fill="#86909C"
                      data-v-3a33dc2b=""
                    ></path>
                  </svg>
                </div>
              </div>

              <div class="nav-menu-item-group">
                <div class="nav-menu-item" @click="logout">
                  <svg
                    width="16"
                    height="16"
                    viewBox="0 0 16 16"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    class="fengwei"
                    data-v-3a33dc2b=""
                  >
                    <path
                      fill-rule="evenodd"
                      clip-rule="evenodd"
                      d="M10.6667 2.55473C13.0212 3.58347 14.6667 5.93291 14.6667 8.66667C14.6667 12.3486 11.6819 15.3333 8 15.3333C4.3181 15.3333 1.33333 12.3486 1.33333 8.66667C1.33333 5.93291 2.97879 3.58347 5.33333 2.55473V4.04684C3.7392 4.969 2.66667 6.69259 2.66667 8.66667C2.66667 11.6122 5.05448 14 8 14C10.9455 14 13.3333 11.6122 13.3333 8.66667C13.3333 6.69259 12.2608 4.969 10.6667 4.04684V2.55473ZM7.33333 8.66667V1.33333C7.33333 1.14924 7.48257 1 7.66667 1H8.33333C8.51743 1 8.66667 1.14924 8.66667 1.33333V8.66667C8.66667 8.85076 8.51743 9 8.33333 9H7.66667C7.48257 9 7.33333 8.85076 7.33333 8.66667Z"
                      fill="#86909C"
                      data-v-3a33dc2b=""
                    ></path>
                  </svg>
                  <span>退出</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 二级导航 -->
      <div class="view-nav" :style="{ display: subNavDis ? 'block' : 'none' }">
        <div class="nav-list">
          <a
            v-for="(item, index) in list"
            ref="list"
            :key="item.type"
            :id="item.type"
          >
            <div class="type" @click="twoChange(item, index, item.type)">
              {{ item.type }}
            </div>
            <div class="nav-list-type">
              <div
                class="list-type"
                :ref="'listType' + index"
                v-for="(i, idx) in item.child"
                :key="i"
                @click="threeTo(item, index, idx)"
              >
                {{ i }}
              </div>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Headnav",
  // 控制二级导航的展示与隐藏
  props: {
    subNavDis: { type: Boolean, default: true },
    col: { type: Object },
    homewritedata: Array,
  },
  data() {
    return {
      i: true,
      m: true,
      navc: false,
      logafter: false,
      img: "",
      // 二级导航数据
      list: [
        {
          type: "推荐",
        },
        {
          type: "关注",
        },
        {
          type: "后端",
          child: [
            "后端",
            "Java",
            "Go",
            "Phthon",
            "MySQL",
            "Redis",
            "Spring Boot",
            "数据库",
            "Spring",
            "算法",
            "Kubernetes",
            "Linux",
            "JVM",
            "架构",
            "Spring Cloud",
          ],
        },
        {
          type: "前端",
          child: [
            "前端",
            "JavaScript",
            "Vue.js",
            "React.js",
            "CSS",
            "Webpack",
            "Node.js",
            "面试",
            "算法",
            "TypeScript",
            "Flutter",
            "微信小程序",
            "前端框架",
            "性能优化",
            "浏览器",
          ],
        },
        {
          type: "Android",
          child: [
            "Android",
            "Flutter",
            "前端",
            "Kotlin",
            "Android Jetpack",
            "Java",
            "性能优化",
            "架构",
            "设计模式",
            "面试",
            "算法",
            "源码",
            "gradle",
            "OpenCV",
            "音视频开发",
          ],
        },
        {
          type: "iOS",
          child: [
            "iOS",
            "Swift",
            "前端",
            "Objective-C",
            "Flutter",
            "Cocoa",
            "OpenGL",
            "逆向",
            "SwiftUI",
            "算法",
            "macOS",
            "音视频开发",
            "RxSwift",
            "面试",
            "架构",
          ],
        },
        {
          type: "人工智能",
          child: [
            "人工智能",
            "算法",
            "机器学习",
            "Python",
            "后端",
            "深度学习",
            "数据分析",
            "数据库",
            "NLP",
            "物联网",
            "百度",
            "大数据",
            "监控",
            "数据可视化",
            "数据挖掘",
          ],
        },
        {
          type: "开发工具",
          child: [
            "Git",
            "前端",
            "GitHub",
            "Docker",
            "Python",
            "开源",
            "后端",
            "云计算",
            "游戏开发",
            "Kubernetes",
            "Linux",
            "Java",
            "IntelliJ IDEA",
            "音视频开发",
            "mPaaS",
          ],
        },
        {
          type: "代码人生",
          child: [
            "程序员",
            "前端",
            "算法",
            "Python",
            "后端",
            "Java",
            "面试",
            "LeetCode",
            "代码规范",
            "测试",
            "架构",
            "数据结构",
            "Linux",
            "运维",
            "鸿蒙OS",
          ],
        },
        {
          type: "阅读",
          child: [
            "程序员",
            "前端",
            "产品",
            "后端",
            "设计模式",
            "面试",
            "数据库",
            "Flink",
            "测试",
            "macOS",
            "Java",
            "音视频开发",
            "笔记",
            "有你翻译计划",
            "RSS",
          ],
        },
      ],
      // 搜索数据
      searh: [],
      // 上次滑动距离
      scrol: 0,
      height: "60px",
    };
  },
  methods: {
    //   写文章的下拉事件
    more() {
      if (this.i) {
        let more = document.querySelector(".more-add");
        more.style.cssText = "display:flex";
        this.i = false;
      } else {
        let more = document.querySelector(".more-add");
        more.style.cssText = "display:none";
        this.i = true;
      }
    },

    // 搜索框聚焦事件
    infocus() {
      let input = document.querySelector(".search-input");
      let search = document.querySelector(".search-form");
      let add = document.querySelector(".search-add");
      let td = document.querySelector(".typehead");
      if (document.body.clientWidth <= 960) {
        input.style.width = "132px ";
        td.style.width = "160px ";
      } else {
        input.style.width = "370px";
        td.style.width = "398px ";
      }
      input.placeholder = "搜索文章/小册/标签/用户";
      search.style.cssText = "border:1px solid #1e80ff";
      add.style.cssText = "overflow:hidden";
    },
    // 搜索框历史记录
    keyDown(event) {
      if (event.keyCode == 13 || event.keyCode == 100) {
        if (event.target.value != "") {
          console.log(this.searh);
          this.searh.push(event.target.value);
        }
        let st = JSON.stringify(this.searh);
        localStorage.setItem("histort", st);
        let his = JSON.parse(localStorage.getItem("histort"));
        console.log(his);
        console.log(this.searh);
      }
    },
    // 清楚历史记录
    clear() {
      this.searh = [];
      localStorage.setItem("histort", "");
    },
    inblur() {
      let input = document.querySelector(".search-input");
      let search = document.querySelector(".search-form");
      let add = document.querySelector(".search-add");
      let td = document.querySelector(".typehead");
      input.style.width = "132px ";
      td.style.width = "160px ";
      input.placeholder = "探索有你";
      search.style.border = "none";
      setTimeout(() => {
        add.style.overflow = "visible";
      }, 300);
    },

    //移动端导航点击事件
    // 导航打开与关闭
    hopen() {
      let md = document.querySelector(".mobile-detil");
      if (this.m) {
        md.style.cssText = "display:block";
        this.m = false;
      } else {
        md.style.cssText = "display:none";
        this.m = true;
      }
    },
    // 移动端导航
    mobilenav(e) {
      let home = document.querySelector(".mobile-h");
      // console.log(e.target.innerHTML)
      home.innerHTML = e.target.innerHTML;
      let md = document.querySelector(".mobile-detil");
      md.style.cssText = "display:none";
      this.m = true;
    },

    // TODO 二级导航修改事件
    twoChange(item, i, type) {
      let lists = this.$refs.list;
      lists.forEach((ele) => {
        ele.style.color = "#86909c";
      });
      lists[i].style.color = "#007fff";
      this.$emit("twoChange", { item: item, type: type });
    },

    // 写文章跳转
    writeTo(e) {
      this.$emit("writeTo", e);
    },
    // 头像点击下拉列表
    navclick() {
      this.navc = !this.navc;
    },
    // 登出
    logout() {
      localStorage.setItem("user", "");
      this.$router.push("/");
    },

    // 三级导航事件
    threeTo(i, index, idx) {
      let lists = this.$refs[`listType${index}`];
      let listss = document.getElementsByClassName("list-type");
      listss.forEach((ele) => {
        ele.style.color = "#86909c";
        ele.style.backgroundColor = "#f4f5f5";
      });
      lists[idx].style.color = "#fff";
      lists[idx].style.backgroundColor = "#007fff";
      this.$emit("linkage", { i, idx });
    },

    // 滚动事件
    getScroll() {
      // let scrollY = document.documentElement.scrollTop;
      // if (scrollY > 300) {
      //   this.height = "0px";
      // } else {
      //   this.height = "60px";
      // }
    },
  },
  mounted() {
    window.addEventListener("scroll", this.getScroll);

    //登录前后样式隐藏
    if (localStorage.getItem("user")) {
      this.logafter = true;
      let nav = document.querySelector(".nav-list");
      nav.children[1].style.cssText = "display:flex";
      let i = JSON.parse(localStorage.getItem("user"));
      this.img = i.img;
    } else {
      this.logafter = false;
      let nav = document.querySelector(".nav-list");
      nav.children[1].style.cssText = "display:none";
    }
  },
};
</script>

<style lang="scss" scoped>
* {
  text-decoration: none;
  a {
    cursor: pointer;
  }
}
.nav {
  background-color: #fff;
  .head {
    width: 100%;
    transition: all 0.3s;
  }
}
.container {
  margin: auto;
  width: 1250px;
  height: 60px;
  display: flex;
  align-items: center;

  .logo {
    margin-right: 20px;
  }
  //   导航分类
  .main-nav {
    display: flex;
    .mn {
      width: 73px;
      height: 60px;
    }
    .main-home {
      color: #1e80ff;
    }
    .main-message {
      position: relative;
      svg {
        position: absolute;
        top: 7px;
        right: -5px;
      }
    }
    .main-developer {
      a {
        padding-left: 20px;
        padding-right: 20px;
      }
      svg {
        margin-bottom: 5px;
        &:hover g:nth-of-type(1) path {
          fill: #1e80ff;
        }
      }
    }
    a {
      text-decoration: none;
      color: #86909c;
      font-size: 16px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      &:hover {
        color: #1e80ff !important;
      }
    }
  }

  //移动端导航
  .mobile-nav {
    display: none;
    flex-grow: 1;
    justify-content: flex-start;
    height: 100%;
    a {
      display: flex;
      align-items: center;
      color: #86909c;
      height: 100%;
    }
    .mobile-home {
      position: relative;
    }
    .mobile-h {
      color: #1e80ff;
      margin-right: 7px;
    }
    .mobile-detil {
      display: none;
      width: 167px;
      position: absolute;
      top: 60px;
      left: 54px;
      z-index: 22;
      background-color: #fff;
      box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
      border: 1px solid rgba(177, 180, 185, 0.45);
      border-radius: 4px;
      font-size: 16px;
      .mp {
        height: 48px;
        a {
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          &:hover {
            color: #1e80ff;
          }
        }
      }
      .mobile-hm {
        height: 48px;
        a {
          color: #1e80ff;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
      .mobile-message {
        position: relative;
        svg {
          position: absolute;
          top: 1px;
          right: 45px;
        }
      }
      .mobile-developer {
        margin-left: 16px;
        svg {
          margin-bottom: 5px;
          &:hover g:nth-of-type(1) path {
            fill: #1e80ff;
          }
        }
      }
    }
  }

  //   搜索框 创作者中心 写文章
  .search-add {
    width: 480px;
    height: 100%;
    display: flex;
    overflow: visible;
    .search-add-div {
      margin-left: 60px;
      display: flex;
      align-items: center;
      padding-left: 12px;
      padding-right: 12px;
      .nav-item-search {
        .search-form {
          background-color: #f4f5f5;
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-radius: 2px;
          input {
            border: none;
            width: 132px;
            padding: 7px 0 7px 12px;
            box-shadow: none;
            outline: none;
            font-size: 13px;
            color: #666;
            background-color: transparent;
            transition: all 0.3s;
            position: relative;
            &::placeholder {
              color: #a8a8a8;
            }
          }
          .typehead {
            // display: none;
            transition: all 0.3s;
            position: absolute;
            top: 47px;
            z-index: 22;
            width: 160px;
            font-size: 13px;
            color: #869aab;
            border-radius: 0.5px;
            box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
            border: 1px solid #ebebeb;
            background-color: #fff;
            .title {
              border-bottom: 1px solid #ebebeb;
              padding: 8px 12px;
              display: flex;
              justify-content: space-between;
              .clear {
                color: #1e80ff;
                &:hover {
                  cursor: pointer;
                }
              }
            }
            .list {
              list-style: none;
              text-align: left;
              li {
                padding: 8px 12px;
                &:hover {
                  background: rgb(231, 230, 230);
                  cursor: pointer;
                }
              }
            }
          }
          .search-icon {
            padding-left: 6px;
            padding-right: 6px;
            cursor: pointer;
          }
        }
      }
    }

    // 创作者中心 写文章
    .nav-item-add {
      width: 220px;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-left: 12px;
      tab-size: all 0.3s;
      .creator-btn {
        width: 102px;
        height: 32px;
        font-size: 14px;
        line-height: 22px;
        border: none;
        padding: 5px 16px;
        background-color: #e8f3ff;
        color: #1e80ff;
        cursor: pointer;
      }
      .add-group {
        display: flex;
        align-items: center;
        position: relative;
        cursor: pointer;
        height: 32px;
        .add-btn {
          font-size: 13px;
          width: 73px;
          padding: 0 15px;
          height: 100%;
          color: #fff;
          background-color: #1e80ff;
          border-radius: 3px;
          outline: none;
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
          border: none;
          &:hover {
            cursor: pointer;
            background-color: #0876e4;
          }
        }
        .more {
          border-left: 1px solid hsla(0, 0%, 100%, 0.1);
          height: 100%;
          color: #fff;
          background-color: #1e80ff;
          border-radius: 3px;
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 5px;
          position: relative;
          &:hover {
            background-color: #0876e4;
          }
        }
        .more-add {
          padding: 5px 0;
          font-size: 13px;
          z-index: 22;
          position: absolute;
          top: 32px;
          right: 0;
          width: 95px;
          height: 26px;
          color: #3b76c5;
          background-color: #fff;
          border: 1px solid #ebebeb;
          border-radius: 2px;
          box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
          display: none;
          span {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            &:hover {
              background-color: #dad9d9;
            }
          }
        }
      }
    }
  }

  // 登录
  .login {
    margin-left: 20px;
    .login-button {
      width: 74px;
      height: 32px;
      padding: 3.6px 20.4px;
      color: #007fff;
      border: 1px solid #007fff;
      background-color: #fff;
      &:hover {
        cursor: pointer;
      }
    }
    .userin {
      width: 100px;
      display: flex;
      align-items: center;
      position: relative;
      img {
        width: 24px;
        height: 24px;
        margin: 0 12px;
        cursor: pointer;
      }
      .menu {
        img {
          width: 42px;
          height: 42px;
          border-radius: 50%;
          cursor: pointer;
        }
      }
      // 下拉列表
      .user-dropdown-list {
        width: 150px;
        // height: 465px;
        position: absolute;
        font-size: 14px;
        color: #4e5969 !important;
        top: 53px;
        right: 0;
        background-color: #fff;
        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
        border: 1px solid rgba(177, 180, 185, 0.45);
        border-radius: 4px;
        .nav-menu-item-group:not(:last-child) {
          border-bottom: 1px solid rgba(0, 0, 0, 0.04);
        }
        .nav-menu-item-group {
          padding: 6px 12px;
          .nav-menu-item {
            display: flex;
            align-items: center;
            padding: 5px;
            &:hover {
              cursor: pointer;
              background-color: hsla(0, 0%, 94.9%, 0.5);
            }
            svg {
              margin-right: 10px;
            }
            .gy {
              margin-right: 35px;
            }
            .nav-menu-se {
              display: none;
              padding: 6px 12px;
              position: absolute;
              top: 310px;
              right: 150px;
              width: 150px;
              background-color: #fff;
              box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
              border: 1px solid rgba(177, 180, 185, 0.45);
              border-radius: 4px;
              .menu-se {
                display: flex;
                align-items: center;
                padding: 5px;
                &:hover {
                  cursor: pointer;
                  background-color: hsla(0, 0%, 94.9%, 0.5);
                }
              }
            }
          }
          .gyse:hover {
            .nav-menu-se {
              display: block;
            }
          }
        }
      }
    }
  }
}

.view-nav {
  width: 100%;
  height: 46px;
  display: flex;
  align-items: center;
  border-top: 1px solid #f1f1f1;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
  .nav-list {
    width: 960px;
    margin: auto;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 13px;
    a {
      display: flex;
      align-items: center;
      height: 100%;
      position: relative;
      color: #86909c;
      &:nth-of-type(1) {
        padding: 0 12px 0 0;
      }
      &:hover {
        color: #007fff !important;
        .nav-list-type {
          display: flex;
          color: #86909c;
        }
      }
      .type {
        width: 100%;
        height: 100%;
        padding: 0 12px;
        line-height: 46px;
      }
      .nav-list-type {
        background-color: #fff;
        width: 345px;
        height: 130px;
        position: absolute;
        top: 46px;
        left: -10px;
        box-shadow: 0 0 5px;
        display: flex;
        flex-wrap: wrap;
        padding: 15px 0 15px 15px;
        display: none;
        .list-type {
          padding: 0 9px;
          height: 25px;
          border-radius: 90px;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #f4f5f5;
          margin-right: 15px;
          margin-bottom: 10px;
          &:hover {
            color: #007fff !important;
          }
        }
      }
    }
  }
  .nav-list a:nth-child(1) .nav-list-type,
  .nav-list a:nth-child(2) .nav-list-type {
    display: none;
  }
  .nav-list a:nth-of-type(1) {
    color: #007fff;
  }
}

@media screen and (max-width: 960px) {
  .container {
    width: 100%;
    box-sizing: border-box;
    padding: 0 17px;
    .main-nav {
      display: none;
    }
    .mobile-nav {
      display: flex;
    }
    .nav-item-add {
      display: none !important;
    }
    .search-add {
      width: auto;
      .search-add-div {
        margin-left: 0px;
      }
    }
  }
}
@media screen and (max-width: 540px) {
  .view-nav {
    width: 100%;
    overflow: auto;
    display: block;
  }
}
@media screen and (max-width: 465px) {
  .search-add {
    display: none !important;
  }
}
</style>
